I'm aware of #6202, but the suggested workaround of changing the file extension did not work. I also tried a variety of configurations with a custom postcss.config.js/cjs/mjs file, as well as updating the vite.css.postcss config option in astro.config.mjs.

I'm able to get it to work with this config:

import { defineConfig } from 'astro/config'

import tailwind from '@astrojs/tailwind'
import tailwindcssNesting from 'tailwindcss/nesting'

// https://astro.build/config
export default defineConfig({
  integrations: [tailwind({ applyBaseStyles: false })],
  vite: {
    css: {
      postcss: {
        plugins: [tailwindcssNesting()]
      }
    }
  }
})

You don't need to initialize the tailwindcss postcss plugin as @astrojs/tailwind handles that for you.

I'm leaving this open though as I found a bug that doesn't let this work if you used a postcss.config.js file instead. I was mistaken, it does work but you need to import with tailwindcss/nesting/index.js instead because tailwind's export is not Node.js ESM friendly. Ideally a file should be used instead. Also, perhaps the nesting support can be added as an option for @astrojs/tailwind too.

Thank you so much for the quick response! That vite configuration works for me too.

I agree, the integration should probably handle this. You could maybe have it on by default since the syntax it enables is just a superset of the regular syntax AFAIK. In that case it would not be a breaking change.

I'm able to get it to work with this config:

import { defineConfig } from 'astro/config'

import tailwind from '@astrojs/tailwind'
import tailwindcssNesting from 'tailwindcss/nesting'

// https://astro.build/config
export default defineConfig({
  integrations: [tailwind({ applyBaseStyles: false })],
  vite: {
    css: {
      postcss: {
        plugins: [tailwindcssNesting()]
      }
    }
  }
})

You don't need to initialize the tailwindcss postcss plugin as @astrojs/tailwind handles that for you.

I'm leaving this open though as I found a bug that doesn't let this work if you used a postcss.config.js file instead. I was mistaken, it does work but you need to import with tailwindcss/nesting/index.js instead because tailwind's export is not Node.js ESM friendly. Ideally a file should be used instead. Also, perhaps the nesting support can be added as an option for @astrojs/tailwind too.

It worked for me but setting applyBaseStyles to true.

import { defineConfig } from 'astro/config'
import tailwind from '@astrojs/tailwind'
import tailwindcssNesting from 'tailwindcss/nesting'
import robotsTxt from "astro-robots-txt"

// https://astro.build/config
export default defineConfig({
  integrations: [
    tailwind({ applyBaseStyles: true }),
    robotsTxt()
  ],
  vite: {
    css: {
      postcss: {
        plugins: [tailwindcssNesting()]
      }
    }
  },
  site: 'https://Sergi0Martin.github.io',
})